<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="utf-8">
<head>
	<title>I love you 1314</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta content="all" name="robots" />
	<meta name="author" content="Ivan Li" />
	<meta name="Copyright" content="http://ivanl.javaeye.com" />
	<meta name="description" content="liyang and yukun's planet for love'" />
	<meta name="keywords" content="w3c, html, css, div, love" />
	<link rel="icon" type="image/x-icon" href="favicon.ico" />
	<link rel="stylesheet" href="css/style.css" type="text/css" />
	<link rel="stylesheet" href="css/galleria.css" type="text/css" media="screen">
	<!-- Include jQuery (Lightbox Requirement) -->
	<script type="text/javascript" src="js/jquery-1.2.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.galleria.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function(){
		
		$('.gallery_demo_unstyled').addClass('gallery_demo'); // adds new class name to maintain degradability
		
		$('ul.gallery_demo').galleria({
			history   : true, // activates the history object for bookmarking, back-button etc.
			clickNext : true, // helper for making the image clickable
			insert    : '#main_image', // the containing selector for our main image
			onImage   : function(image,caption,thumb) { // let's add some image effects for demonstration purposes
				
				// fade in the image & caption
				image.css('display','none').fadeIn(1000);
				caption.css('display','none').fadeIn(1000);
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// fade out inactive thumbnail
				_li.siblings().children('img.selected').fadeTo(500,0.3);
				
				// fade in active thumbnail
				thumb.fadeTo('fast',1).addClass('selected');
				
				// add a title for the clickable image
				image.attr('title','Next image >>');
			},
			onThumb : function(thumb) { // thumbnail effects goes here
				
				// fetch the thumbnail container
				var _li = thumb.parents('li');
				
				// if thumbnail is active, fade all the way.
				var _fadeTo = _li.is('.active') ? '1' : '0.3';
				
				// fade in the thumbnail when finnished loading
				thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
				
				// hover effects
				thumb.hover(
					function() { thumb.fadeTo('fast',1); },
					function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
				)
			}
		});
	});
	
	</script>
	<style media="screen,projection" type="text/css">
	
		/* BEGIN DEMO STYLE */
		*{margin:0;padding:0}
		h1,h2{font:bold 80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
		a{color:#348;text-decoration:none;outline:none;}
		a:hover{color:#67a;}
		.caption{font-style:italic;color:#887;}
		.demo{position:relative;margin-top:2em;}
		.gallery_demo{width:702px;margin:0 auto;}
		.gallery_demo li{width:68px;height:50px;border:3px double #111;margin: 0 2px;background:#000;}
		.gallery_demo li div{left:240px}
		.gallery_demo li div .caption{font:italic 0.7em/1.4 georgia,serif;}
	
		#main_image{margin:0 auto 60px auto;height:438px;width:700px;background:black;}
		#main_image img{margin-bottom:10px;}
	
		.nav{padding-top:15px;clear:both;font:80% 'helvetica neue',sans-serif;letter-spacing:3px;text-transform:uppercase;}
	
		.info{text-align:left;width:700px;margin:30px auto;border-top:1px dotted #221;padding-top:30px;}
		.info p{margin-top:1.6em;}
  </style>
</head>
<body>
	<div id="container">
		<div id="header" style="height:70px;">
			<div id="menu">
				<ul>
					<li><a href="index.html">首页</a></li>
					<li class="menuDiv"></li>
					<li><a href="husband.html">老公</a></li>
					<li class="menuDiv"></li>
					<li><a href="wife.html">老婆</a></li>
					<li class="menuDiv"></li>
					<li><a href="baby.html">宝宝</a></li>
					<li class="menuDiv"></li>
					<li><a href="photo.html">相册</a></li>
					<li class="menuDiv"></li>
					<li><a href="say.html">说吧</a></li>
					<li class="menuDiv"></li>
					<li><a href="about.html">关于</a></li>
					<li class="menuDiv"></li>
				</ul>
			</div>
		</div>
		<div class="photoMain">
			<div>
				<ul class="gallery_demo_unstyled">
					<li><img src="photo/1.jpg" alt="Flowing Rock" title="Flowing Rock Caption"></li>
					<li><img src="photo/2.jpg" alt="Stones" title="Stones - from Apple images"></li>
					<li class="active"><img src="photo/3.jpg" alt="Grass Blades" title="Apple nature desktop images"></li>
					<li><img src="photo/4.jpg" alt="Ladybug" title="Ut rutrum, lectus eu pulvinar elementum, lacus urna vestibulum ipsum"></li>
					<li><img src="photo/5.jpg" alt="Lightning" title="Black &amp; White"></li>
					<li><img src="photo/6.jpg" alt="Lotus" title="Fusce quam mi, sagittis nec, adipiscing at, sodales quis"></li>
					<li><img src="photo/7.jpg" alt="Mojave" title="Suspendisse volutpat posuere dui. Suspendisse sit amet lorem et risus faucibus pellentesque."></li>
					<li><img src="photo/8.jpg" alt="Pier" title="Proin erat nisi"></li>
					<li><img src="photo/9.jpg" alt="Sea Mist" title="Caption text from title"></li>
				</ul>
				<p class="nav">
					<a href="#" onclick="$.galleria.prev(); return false;">&laquo; previous</a> | 
					<a href="#" onclick="$.galleria.next(); return false;">next &raquo;</a>
				</p>
			</div>
		</div>
		<div id="footer">
			版权所有 Copyright &copy; 2008-forever liyang and yukun
		</div>
	</div>
</body>
</html>
